<template>
  <div>
    <h1>商品类别</h1>
    <el-input style="width: 200px" v-model="select.phoneProductCategory" placeholder="按照手机号查询"></el-input>

    <el-date-picker
        v-model="select.startTime"
        type="datetime"
        placeholder="选择起始日期时间">
    </el-date-picker>
    <el-date-picker
        v-model="select.endTime"
        type="datetime"
        placeholder="选择结束日期时间">
    </el-date-picker>
    <el-button class="selectButton"  style="width: 76px"  type="primary" @click="selectByPhone()">搜索</el-button>
    <el-table :data="productCategoryList" style="width: 100%">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="categoryName" label="分类名称"></el-table-column>
      <el-table-column prop="categorySort" label="分类排序"></el-table-column>
      <el-table-column prop="addTime" label="添加时间"></el-table-column>
      <el-table-column prop="isEnabled" label="当前状态">

        <template slot-scope="scope">
          <span>{{ scope.row.isEnabled == 0 ? '已上架' : '未上架' }}</span>
        </template>

      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleSwitchChange(scope.row)">修改状态</el-button>
          <el-button @click="deleteProductCategory(scope.row)">删除</el-button>
          <el-button  @click="selectByID(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页信息-->
    <span>
    一共{{ totalCount }}条数据</span>
    <el-pagination
        background
        layout="prev, pager, next"
        @prev-click="prev"
        @next-click="next"
        @current-change="changeCurrentPage"
        :total="this.totalCount"
    >
    </el-pagination>
    <!-- 上传的弹窗   -->
    <el-dialog title="上传商品类别" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="formOfShow" label-width="80px">
        <el-form-item label="类别名称">
          <el-input v-model="formOfShow.categoryName"></el-input>
        </el-form-item>
        <el-form-item label="类别权重">
          <el-input v-model="formOfShow.categorySort"></el-input>
        </el-form-item>
        <el-form-item label="是否展示">
          <template>
            <el-radio v-model="formOfShow.isEnabled" label="0">上架</el-radio>
            <el-radio v-model="formOfShow.isEnabled" label="1">不上架</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="添加时间">
        <el-date-picker
            v-model="formOfShow.addTime"
            type="datetime"
            placeholder="请选择">
        </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">立即修改</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
import {sendRequest} from "@/util/request";

export default {
  data() {
    return {
      //弹窗
      dialogFormVisible: false,
      formOfShow:{
        id:'',
        categoryName:'',
        categorySort:'',
        isEnabled:'',
        addTime:'',
      },
      productCategoryList: [],
      form: {
        id:'',
        isEnabled:'',
        currentPage: 1,
        pageSize: 10,
      },
      select:{
        phoneProductCategory:'',
        startTime:'',
        endTime:'',
      },
      value:'',
      totalCount: '',
    }
  },
  created() {
    this.showProductCategory();
  },
  methods: {
    selectByID(row){
      this.dialogFormVisible = true
      this.formOfShow.id = row.id
      sendRequest(
          "post",
          "productCategory/selectCategory",
          this.formOfShow
      ).then(res => {
        this.formOfShow = res.productCategory
        console.log(this.formOfShow)
      })
    },
    deleteProductCategory(row){
      this.form.id=row.id
      sendRequest(
          "post",
          "productCategory/deleteProductCategory",
          this.form).then(res=>{
        this.$message(res.msg);
        this.showProductCategory();
      })
    },
    handleSwitchChange(row){
      this.form.id = row.id,
          this.form.isEnabled = row.isEnabled != 1 ? 1 : 0;
      sendRequest(
          "post",
          "productCategory/changeEnabled",
          this.form
      ).then(res=>{
        this.$message(res.msg);
        this.showProductCategory();
      })
    },
    showProductCategory() {
      sendRequest(
          "post",
          "productCategory/showProductCategory",
          this.form
      ).then(res => {
        this.productCategoryList = res.productCategoryList;
        this.totalCount = Number(res.total);
      })
    },
    //点击页数跳转
    changeCurrentPage(item) {
      this.form.currentPage = item;
      this.showProductCategory();
    },
    //上一页
    prev() {
      this.form.currentPage++;
      this.form.showProductCategory()
    },
    //上一页
    next() {
      this.form.currentPage++;
      this.form.showProductCategory()
    },

    //提交弹窗
    onSubmit(){
      this.dialogFormVisible = false
      sendRequest(
          "post",
          "productCategory/changeCategory",
          this.formOfShow
      ).then(res => {
        this.$message(res.msg);
        this.showProductCategory();
      })
    }
  }
}

</script>

<style>
.selectButton{
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
</style>